<template>
  <div class="contactUs_list">
    <div
      class="collapse_box clearfloat"
      v-for="(item,index) in list"
      :key="index"
      @click="onCollapse(index)"
    >
      <h3>
        {{item.name}}
        <router-link :to="{name:'zh_contactUs_detail' ,query:{ id: item.id}}">查看更多</router-link>
      </h3>
      <div class="collapse_list clearfloat">
        <img class="rotate" src="@/assets/images/rotate.png" alt />
        <div class="collapse_item">
          <img src="@/assets/images/contactUs_01.png" alt />
          <span>地址：</span>
          <div>{{item.address}}</div>
        </div>
        <div class="collapse_item">
          <img src="@/assets/images/contactUs_02.png" alt />
          <span>电话：</span>
          <div>{{item.tel}}</div>
        </div>
        <div class="collapse_item">
          <img src="@/assets/images/contactUs_03.png" alt />
          <span>传真：</span>
          <div>{{item.email}}</div>
        </div>
        <div class="collapse_item">
          <img src="@/assets/images/contactUs_04.png" alt />
          <span>邮编：</span>
          <div>{{item.postcode}}</div>
        </div>
      </div>
      <transition name="mapSilde">
        <div v-if="item.ifMap" class="map" v-html="item.content"></div>
      </transition>
    </div>
  </div>
</template>
<script>
import { office_list } from "@/api/contactUs.js";
export default {
  data() {
    return {
      active: 1,
      ifMap: false,
      list: []
    };
  },
  mounted() {
    office_list().then(res => {
      res.data.data.map(item => {
        item.ifMAp = false;
      });
      this.list = res.data.data;
    });
  },
  methods: {
    onCollapse(index) {
      this.active = index;
      this.$set(this.list[index], "ifMap", !this.list[index].ifMap);
      // this.ifMap = !this.ifMap;
    }
  }
};
</script>
<style scoped src="./sass/contactUs.css"></style>
<style scoped>
.mapSilde-enter-active {
  animation: bounce-in 1s;
}
.mapSilde-leave-active {
  animation: bounce-in 1s reverse;
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>